<template>
  <div class="sensitive-test-dialog">
    <el-dialog
      title="敏感内容检测测试"
      v-model="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div class="test-form">
        <el-form :model="testForm" label-width="100px">
          <el-form-item label="测试文本">
            <el-input
              v-model="testForm.text"
              type="textarea"
              :rows="6"
              placeholder="请输入待检测的文本内容"
            />
          </el-form-item>
          
          <el-form-item>
            <el-button type="primary" @click="runDetection" :loading="loading">
              检测内容
            </el-button>
          </el-form-item>
        </el-form>
        
        <div v-if="result" class="test-result">
          <el-divider content-position="center">检测结果</el-divider>
          
          <el-descriptions :column="2" border>
            <el-descriptions-item label="是否通过" :span="2">
              <el-tag :type="result.passed ? 'success' : 'danger'">
                {{ result.passed ? '通过' : '存在敏感内容' }}
              </el-tag>
            </el-descriptions-item>
            
            <el-descriptions-item label="敏感风险等级" :span="2">
              <el-tag :type="getRiskLevelTag(result.riskLevel)">
                {{ getRiskLevelText(result.riskLevel) }}
              </el-tag>
            </el-descriptions-item>
            
            <el-descriptions-item label="审核建议" :span="2">
              <span>{{ result.reviewSuggestion || '无建议' }}</span>
            </el-descriptions-item>
            
            <el-descriptions-item label="敏感词列表" :span="2">
              <div class="sensitive-words-list" v-if="result.sensitiveWords && result.sensitiveWords.length > 0">
                <el-tag
                  v-for="(word, index) in result.sensitiveWords"
                  :key="index"
                  type="danger"
                  effect="dark"
                  size="small"
                  style="margin-right: 8px; margin-bottom: 8px;"
                >
                  {{ word }}
                </el-tag>
              </div>
              <span v-else>未检测到敏感词</span>
            </el-descriptions-item>
            
            <el-descriptions-item label="高亮内容" :span="2">
              <div class="highlighted-content" v-if="result.text" v-html="highlightSensitiveWords(result.text)"></div>
            </el-descriptions-item>
            
            <el-descriptions-item label="自动审核结果" :span="2">
              <el-tag :type="getReviewResultTag(result.autoReviewResult)">
                {{ getReviewResultText(result.autoReviewResult) }}
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { detectSensitiveContent } from '../../api/admin';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:visible', 'close']);

// 对话框显示状态
const dialogVisible = ref(props.visible);

// 监听visible prop变化
watch(() => props.visible, (newValue) => {
  dialogVisible.value = newValue;
});

// 监听对话框状态变化
watch(dialogVisible, (newValue) => {
  emit('update:visible', newValue);
  if (!newValue) {
    emit('close');
  }
});

// 测试表单
const testForm = ref({
  text: ''
});

// 加载状态
const loading = ref(false);

// 检测结果
const result = ref(null);

// 关闭对话框
const handleClose = () => {
  dialogVisible.value = false;
};

// 运行敏感内容检测
const runDetection = async () => {
  if (!testForm.value.text) {
    ElMessage.warning('请输入待检测的文本内容');
    return;
  }
  
  loading.value = true;
  try {
    const response = await detectSensitiveContent(testForm.value.text);
    if (response.code === 200) {
      result.value = {
        ...response.data,
        text: testForm.value.text
      };
      
      // 检查敏感词数组是否存在
      if (!result.value.sensitiveWords) {
        result.value.sensitiveWords = [];
      }
    } else {
      ElMessage.error(response.message || '检测敏感内容失败');
    }
  } catch (error) {
    console.error('检测敏感内容失败:', error);
    ElMessage.error('检测敏感内容失败');
  } finally {
    loading.value = false;
  }
};

// 风险等级标签和文本
const getRiskLevelTag = (level) => {
  const levels = {
    0: 'success',
    1: 'info',
    2: 'warning',
    3: 'danger'
  };
  return levels[level] || 'info';
};

const getRiskLevelText = (level) => {
  const levels = {
    0: '无风险',
    1: '低风险',
    2: '中等风险',
    3: '高风险'
  };
  return levels[level] || '未知';
};

// 审核结果标签和文本
const getReviewResultTag = (result) => {
  const results = {
    '通过': 'success',
    '人工审核': 'warning',
    '拒绝': 'danger'
  };
  return results[result] || 'info';
};

const getReviewResultText = (result) => {
  return result || '未知';
};

// 高亮敏感词
const highlightSensitiveWords = (content) => {
  if (!content || !result.value || !result.value.sensitiveWords) return content;
  
  let highlightedContent = content;
  result.value.sensitiveWords.forEach(word => {
    if (word) {
      const regex = new RegExp(word, 'gi');
      highlightedContent = highlightedContent.replace(regex, match => 
        `<span class="highlight-sensitive">${match}</span>`
      );
    }
  });
  
  return highlightedContent;
};

// 重置表单和结果
const resetForm = () => {
  testForm.value.text = '';
  result.value = null;
};

// 暴露方法给父组件
defineExpose({
  resetForm
});
</script>

<style scoped>
.sensitive-test-dialog {
  width: 100%;
}

.test-form {
  width: 100%;
}

.test-result {
  margin-top: 20px;
}

.sensitive-words-list {
  display: flex;
  flex-wrap: wrap;
}

.highlighted-content {
  padding: 15px;
  background-color: #f8f8f8;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-all;
  line-height: 1.6;
}

:deep(.highlight-sensitive) {
  color: #F56C6C;
  font-weight: bold;
  background-color: rgba(245, 108, 108, 0.1);
  padding: 0 2px;
  border-radius: 2px;
}

:deep(.el-descriptions) {
  margin-bottom: 20px;
}
</style> 